<template>
  <div class="home-view">
    <!-- 首页展示 -->
    <div class="header">
      <div class="background">
        <div class="background-cover">
          <span v-for="i in 10" :key="i" class="background-cover-circle"></span>
        </div>
      </div>
      <div class="home-view-content">
        <div class="content-inner">
          <div class="content-inner-left">
            <h1>{{ MainDisplay.title }}</h1>
            <p>{{ MainDisplay.discribe }}</p>
            <a class="content-inner-left-button" :href="MainDisplay.link" target="_blank">GET TO PLAY ▷</a>
            <p>{{ MainDisplay.official }}</p>
            <a class="content-inner-left-picbutton" :href="MainDisplay.officialWeb" target="_blank">
              <img :src="MainDisplay.officialPic" alt="">
            </a>
          </div>
          <div class="content-inner-right">
            <div class="content-inner-right-back" v-resize="boxResize">
              <div>
                <el-carousel :height="boxHeight + 'px'">
                  <el-carousel-item class="home-carousel-item" v-for="pic in MainDisplay.pics" :key="pic">
                    <img :src="pic" alt="">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 归档 -->
    <Catalogue />
    <!-- 展示文章 -->
    <ArticleDisplay :display-articles="displayArticles" />
  </div>
</template>

<script setup>
import Catalogue from '../components/Catalogue.vue';
import ArticleDisplay from '../components/ArticleDisplay.vue';
import { ref } from 'vue';
import { getMainDisplay, getArticle_all } from '../api/api';

// 首页展示
const MainDisplay = ref({
  title: '',
  discribe: '',
  link: '',
  official: '',
  officialWeb: '',
  officialPic: '',
  pics: []
})

// 展示文章list
const displayArticles = ref([])

// 加载首页展示
getMainDisplay().then(response => {
  MainDisplay.value = response.data
}).catch(error => console.log(error))

// 加载文章
getArticle_all().then(response => {
  displayArticles.value = response.data.reverse()
}).catch(error => console.log(error))

// carousel自适应高度
const boxHeight = ref(0)
const boxResize = (dom) => {
  boxHeight.value = dom.height
}
</script>

<style scoped>
.home-view {
  height: fit-content;
  width: 100%;
  background-color: #F5F7FA;
}

.header {
  height: 100vh;
  /* background: url(../assets/img/bg1.png) no-repeat fixed; */
  background: url(https://sam-1306698532.cos.ap-nanjing.myqcloud.com/pic/bg1.png) no-repeat fixed;
  background-size: cover;
}

.home-view-content {
  height: 100%;
  width: 100%;
  padding-top: 4.5rem;
}

.content-inner {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.content-inner-left {
  height: 100%;
  width: 40%;
  display: flex;
  flex-direction: column;
  /* '\n'换行符生效 */
  white-space: pre-wrap;
}

.content-inner-left>h1 {
  margin: 15% 0 0 0;
  font-size: 2.5rem;
  font-weight: 800;
  color: rgb(255, 255, 255);
}

.content-inner-left>p {
  margin: 10% 0 4% 0;
  color: rgb(235, 235, 235);
  font-size: 1.2rem;
}

.content-inner-left>a {
  margin: 0;
  display: block;
  height: 3.5rem;
  width: 40%;
  border-radius: .25rem;
  display: flex;
  color: rgba(255, 255, 255, 0.824);
  font-size: 1rem;
}

.content-inner-left>a:hover {
  color: rgb(207, 207, 207);
}

.content-inner-left>a:active {
  color: #fff;
}

.content-inner-left-button {
  background-color: #e15958;
  align-items: center;
  justify-content: center;
}

.content-inner-left-picbutton {
  background-color: transparent;
}

.content-inner-left-picbutton>img {
  height: 100%;
  width: auto;
}

.content-inner-right {
  height: 100%;
  width: 40%;
}

.content-inner-right-back {
  height: 78%;
  width: 65%;
  margin-top: 10%;
  margin-left: 25%;
  background-color: #e15958;
  border-radius: .25rem;
  overflow: visible;
  position: absolute;
}

.content-inner-right-back>div {
  height: 100%;
  width: 100%;
  margin: 2.25rem 0 0 2.25rem;
  border-radius: .25rem;
  background-color: rgb(255, 229, 127);
}

.content-inner-right .notice {
  height: 25%;
  width: 90%;
  margin: 10px auto;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: .25rem;
  box-shadow: var(--el-box-shadow);
}

.notice>h1 {
  text-align: center;
}

.content-inner-right .tools {
  height: 30%;
  width: 90%;
  margin: 10px auto;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: .25rem;
  box-shadow: var(--el-box-shadow);
}

.tools>h1 {
  text-align: center;
}

.tools>div {
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.title {
  width: 100%;
  height: 4rem;
  text-align: center;
  color: #fff;
}

.home-carousel {
  height: calc(100% - 4rem);
  width: 100%;
}

.home-carousel-item {
  border-radius: .25rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-carousel-item>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.recommend {
  margin: 4rem auto 0 auto;
  width: 74%;
  height: 45rem;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
}

.home-view-bottom {
  height: fit-content;
  width: 100%;
  padding: 5rem 0;
  display: flex;
  flex-direction: row;
}

.background {
  height: 100%;
  width: 100%;
  top: 0;
  position: absolute;
}

.background-cover {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 50%, transparent 0);
  background-size: 3px 3px;
  background-repeat: repeat;
}

.background-cover-circle {
  position: absolute;
  border-radius: 50%;
}

.background-cover-circle:nth-child(1) {
  height: 150px;
  width: 150px;
  bottom: auto;
  left: -4%;
  background: rgba(255, 255, 255, .1);
}

.background-cover-circle:nth-child(2) {
  height: 50px;
  width: 50px;
  top: 10%;
  right: 4%;
  background: rgba(255, 255, 255, .1);
}

.background-cover-circle:nth-child(3) {
  height: 50px;
  width: 50px;
  top: 280px;
  right: 5.66666%;
  background: rgba(255, 255, 255, .3);
}

.background-cover-circle:nth-child(4) {
  height: 75px;
  width: 75px;
  top: 320px;
  right: 7%;
  background: rgba(255, 255, 255, .15);
}

.background-cover-circle:nth-child(5) {
  height: 100px;
  width: 100px;
  top: 38%;
  right: auto;
  left: 1%;
  background: rgba(255, 255, 255, .05);
}

.background-cover-circle:nth-child(6) {
  width: 200px;
  height: 200px;
  top: 44%;
  right: auto;
  left: 10%;
  background: rgba(255, 255, 255, .15);
}

.background-cover-circle:nth-child(7) {
  height: 50px;
  width: 50px;
  right: 36%;
  bottom: 50%;
  background: rgba(255, 255, 255, .04);
}

.background-cover-circle:nth-child(8) {
  height: 100px;
  width: 100px;
  right: 2%;
  bottom: 70px;
  background: rgba(255, 255, 255, .2);
}

.background-cover-circle:nth-child(9) {
  height: 50px;
  width: 50px;
  right: 2%;
  bottom: 1%;
  background: rgba(255, 255, 255, .1);
}

.background-cover-circle:nth-child(10) {
  height: 100px;
  width: 100px;
  right: auto;
  bottom: 1%;
  left: 1%;
  background: rgba(255, 255, 255, .05);
}
</style>